<template>
    <view class="record-detail-page">
        <Navbar title="处理详情" />
    <view class="review-content">
      <template v-if="detail">
        <!-- 退回记录（有就显示，没有就不显示） -->
        <view v-if="detail.rejectRecords && detail.rejectRecords.length > 0" class="reject-records">
          <view v-for="(record, index) in [...detail.rejectRecords].reverse()" :key="index" class="reject-record-card">
            <view class="reject-info-card">
              <view class="info-row">
                <view class="info-label">退回时间</view>
                <view class="info-value">{{ record.rejectTime }}</view>
              </view>
              <view class="info-row">
                <view class="info-label">处理时间</view>
                <view class="info-value">{{ record.rehandleTime }}</view>
              </view>
              <view class="info-row">
                <view class="info-label">处理人</view>
                <view class="info-value">{{ record.rehandlePerson || detail.handler }}</view>
              </view>
              <view class="info-row" v-if="detail.auditor">
                <view class="info-label">审核人</view>
                <view class="info-value">{{ detail.auditor }}</view>
              </view>
              <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
              <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
              <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
              <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
            </view>
            <view class="content-card">
              <view class="card-title">处理方法</view>
              <view class="card-content">{{ record.rehandleMethod }}</view>
              <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
              <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
              <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
              <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
            </view>
            <view v-if="record.rehandleImages && record.rehandleImages.length > 0" class="content-card">
              <view class="card-title">图片查看</view>
              <scroll-view class="image-list" scroll-x>
                <image
                  v-for="(img, imgIndex) in record.rehandleImages"
                  :key="imgIndex"
                  :src="img"
                  class="image-item"
                  mode="aspectFill"
                  @click="previewImage(img, record.rehandleImages)"
                  @error="handleImageError"
                />
              </scroll-view>
              <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
              <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
              <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
              <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
            </view>
            
            <!-- 在最新退回记录下方显示提示文字 -->
            <view 
              v-if="index === 0" 
              class="history-tip"
            >
              以下为历史处理记录
            </view>
            
            <!-- 分割线 -->
            <view v-if="index < detail.rejectRecords.length - 1" class="divider"></view>
          </view>
        </view>
        <!-- 首次处理内容（无论有无退回记录都显示） -->
        <view class="first-handle-card">
          <view class="card-title">处理记录</view>
          <view class="info-row">
            <view class="info-label">告警位置</view>
            <view class="info-value">{{ detail.location }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">告警设备</view>
            <view class="info-value">{{ detail.host }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">告警时间</view>
            <view class="info-value">{{ detail.alarmTime }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">接警时间</view>
            <view class="info-value">{{ detail.receiveTime }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">处理时间</view>
            <view class="info-value">{{ detail.handleTime }}</view>
          </view>
          <view class="info-row">
            <view class="info-label">处理人</view>
            <view class="info-value">{{ detail.handler }}</view>
          </view>
          <view class="info-row" v-if="detail.auditor">
            <view class="info-label">审核人</view>
            <view class="info-value">{{ detail.auditor }}</view>
          </view>
        </view>
        <view class="content-card">
          <view class="card-title">问题描述</view>
          <view class="card-content">{{ detail.problemDesc }}</view>
          <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
          <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
          <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
          <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
        </view>
        <view class="content-card">
          <view class="card-title">原因分析</view>
          <view class="card-content">{{ detail.causeAnalysis }}</view>
          <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
          <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
          <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
          <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
        </view>
        <view class="content-card">
          <view class="card-title">处理方法</view>
          <view class="card-content">{{ detail.handleMethod }}</view>
          <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
          <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
          <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
          <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
        </view>
        <view class="content-card">
          <view class="card-title">图片查看</view>
          <scroll-view class="image-list" scroll-x>
            <image
              v-for="(img, index) in detail.images"
              :key="index"
              :src="img"
              class="image-item"
              mode="aspectFill"
              @click="previewImage(img, detail.images)"
              @error="handleImageError"
            />
          </scroll-view>
          <image class="left-bottom" src="/static/img/left-bottom.png" mode="widthFix"></image>
          <image class="right-bottom" src="/static/img/right-bottom.png" mode="widthFix"></image>
          <image class="left-top" src="/static/img/left-top.png" mode="widthFix"></image>
          <image class="right-top" src="/static/img/right-top.png" mode="widthFix"></image>
        </view>
      </template>
      <view v-else class="empty-tip">暂无数据</view>
    </view>
    </view>
</template>

<script setup>
import Navbar from '@/components/Navbar.vue';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createRequest } from '@/utils/request';

const detail = ref(null);

// 图片预览
function previewImage(current, urls) {
  if (!current || !urls || !Array.isArray(urls) || urls.length === 0) {
    uni.showToast({ title: '图片数据无效', icon: 'none' });
    return;
  }
  const validUrls = urls.filter(
    url => url && typeof url === 'string' && url.trim() !== ''
  );
  if (validUrls.length === 0) {
    uni.showToast({ title: '没有有效的图片', icon: 'none' });
    return;
  }
  const currentIndex = validUrls.indexOf(current);
  if (currentIndex === -1) {
    current = validUrls[0];
  }
  uni.previewImage({
    current,
    urls: validUrls,
    fail: err => {
      console.error('图片预览失败:', err);
      uni.showToast({ title: '图片预览失败', icon: 'none' });
    },
  });
}

const fetchAlarm = async id => {
  try {
    const res = await createRequest('/alarm/detail', { method: 'GET', data: { id } });
    detail.value = res.data;
  } catch (error) {
    console.error('获取告警详情失败:', error);
    uni.showToast({ title: '获取告警详情失败', icon: 'none' });
  }
};
function handleImageError(e) {
  console.error('图片加载失败:', e);
}

onLoad(options => {
  const id = options.id || '';
  if (!id) {
    uni.showToast({ title: '告警ID缺失', icon: 'none' });
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
    return;
  }
  fetchAlarm(id);
});
</script>

<style lang="scss" scoped>
.record-detail-page {
    @include page-with-header;
    background: #172869;
    min-height: 100vh;
    padding-bottom: 40rpx;
}

.review-content {
  padding: 24rpx;
}

.first-handle-card {
  position: relative;
  width: 680rpx;
  height: 558rpx;
  margin: 0 auto 40rpx;
  background-image: url('@/static/img/consolePages/first-handle-card.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 30rpx;
  box-sizing: border-box;
}
.left-bottom {
  position: absolute;
  left: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-bottom {
  position: absolute;
  right: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.left-top {
  position: absolute;
  left: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-top {
  position: absolute;
  right: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.alarm-info-card,
.content-card,
.reject-info-card {
    background: #051749;
  padding: 20rpx;
  box-sizing: border-box;
  margin: 0 auto 20rpx;
  border: 1rpx solid #50DAFF;
  position: relative;
  width: 686rpx;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  margin-bottom: 26rpx;
    font-size: 28rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
    color: rgba(255, 255, 255, 0.5);
    min-width: 160rpx;
  flex-shrink: 0;
}

.info-value {
    flex: 1;
    text-align: right;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.card-title {
    font-size: 30rpx;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
  margin-bottom: 24rpx;
}

.card-content {
  font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 24rpx;
}

.image-list {
    display: flex;
  gap: 16rpx;
    overflow-x: auto;
    white-space: nowrap;
}

.image-item {
    width: 160rpx;
    height: 160rpx;
    object-fit: cover;
    background: #a2a2a2;
  flex-shrink: 0;
  margin-right: 16rpx;
  border: 1rpx solid #50daff;
}

.reject-records {
  margin-bottom: 24rpx;
}

.reject-record-card {
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
}

.reject-record-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.empty-tip {
  color: #fff;
  text-align: center;
  margin-top: 100rpx;
  font-size: 32rpx;
}

.history-tip {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 24rpx;
  padding: 16rpx 0 24rpx;
  font-weight: 500;
}

.divider {
  height: 1rpx;
  background-color: rgba(30, 200, 225, 0.1);
  margin: 24rpx 0;
}
</style>
